﻿$(document).ready(function () {

    //transitions
    //for more transition, goto http://gsgd.co.uk/sandbox/jquery/easing/
    var style = 'easeOutElastic';

    //Retrieve the selected item position and width
    var default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left);
    var default_width = $('#lava li.selected').width();

    //Set the floating bar position and width
    $('#box').css({ left: default_left });
    $('#box .head').css({ width: default_width });

    //if mouseover the menu item
    $('#lava li').hover(function () {

        //Get the position and width of the menu item
        left = Math.round($(this).offset().left - $('#lava').offset().left);
        width = $(this).width();

        //Set the floating bar position, width and transition
        $('#box').stop(false, true).animate({ left: left }, { duration: 1000, easing: style });
        $('#box .head').stop(false, true).animate({ width: width+25 }, { duration: 1000, easing: style });

        //if user click on the menu
    }).click(function () {

        //reset the selected item
        $('#lava li').removeClass('selected');

        //select the current item
        $(this).addClass('selected');

    });

    //If the mouse leave the menu, reset the floating bar to the selected item
    $('#lava').mouseleave(function () {

        //Retrieve the selected item position and width
        default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left);
        default_width = $('#lava li.selected').width()+25;

        //Set the floating bar position, width and transition
        $('#box').stop(false, true).animate({ left: default_left }, { duration: 1500, easing: style });
        $('#box .head').stop(false, true).animate({ width: default_width }, { duration: 1500, easing: style });

    });

    $("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)

    $("ul.topnav li span").click(function () { //When trigger is clicked...

        //Following events are applied to the subnav itself (moving subnav up and down)
        $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

        $(this).parent().hover(function () {
        }, function () {
            $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
        });

        //Following events are applied to the trigger (Hover events for the trigger)
    }).hover(function () {
        $(this).addClass("subhover"); //On hover over, add class "subhover"
    }, function () {	//On Hover Out
        $(this).removeClass("subhover"); //On hover out, remove class "subhover"
    });

});
	
